<template>
  <div>
    <h2>学生列表展示</h2>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.studentname" placeholder="学生姓名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSelect">查询</el-button>
        <el-button type="success" @click="onAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="studentname" label="学生姓名"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="address" label="家庭地址"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="onDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination
          :current-page="pageNum"
          :total="total"
          :page-count="pages"
          layout="total,prev, pager, next"
          @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogFormVisible"
               title="添加或修改学生信息">
      <el-form :model="form" :rules="rules" ref="ruleFormRef">
        <el-form-item label="姓名" prop="studentname">
          <el-input v-model="form.studentname" type="text" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender" class="ml-4">
            <el-radio label="男" size="small"/>
            <el-radio label="女" size="small"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" type="text"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="form.address"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="doAdd('ruleFormRef')">
        提交
      </el-button>
      <el-button @click="resetForm('ruleFormRef')">重置</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {reactive, toRefs, onMounted, ref} from "vue";
import {ElMessageBox,ElMessage} from "element-plus";
import axios from 'axios'
export default{
  name: "StudentView",
  setup(){
    const data=reactive({
      formInline:{
        studentname:''
      },
      pageNum:1,//当前页数
      tableData:[

      ],
      form:{
        id:'',
        studentname:'',
        gender:'男',
        age:'',
        address:''
      },
      rules:{
        studentname: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { pattern :/^(1[8-9]|[2-9]\d)$/,message: '必须是18-99之间的数字', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
        ],
      },
      total:0,//总条数
      pages:0,//总页数
      dialogFormVisible:false
    })
    //获取学生列表
    const list = () => {
      axios({
        url: '/api/students/pageList?stuName='+data.formInline.studentname+"&pageNum="+data.pageNum,
        method: 'get'
      }).then(function (result){
        data.tableData=result.data.data.records
        data.pageNum=result.data.data.current
        data.total=result.data.data.total
        data.pages=result.data.data.pages
      })
    }

    //查询
    const onSelect = () => {
      //发送axios请求
      list();
    }

    //编辑
    const onEdit = (mess) => {
      /*//获取当前修改行的信息
      data.form.id=mess.id;
      data.form.age=mess.age;
      data.form.gender=mess.gender;
      data.form.address=mess.address;
      data.form.studentname=mess.studentname;*/
      data.form=JSON.parse(JSON.stringify(mess))
      data.dialogFormVisible=true;
    }

    const ruleFormRef = ref()

    //去添加
    const onAdd = () => {
      data.form.id='';
      data.form.age='';
      data.form.gender='';
      data.form.address='';
      data.form.studentname='';
      //显示弹窗
      data.dialogFormVisible=true;
    }

    //提交添加
    const doAdd = () => {
      ruleFormRef.value.validate(vaild => {
        if (vaild) {
          if(data.form.id) {
            axios({
              url: '/api/students',
              method: 'put',
              data: data.form
            }).then(function (result) {
              if (result.data.code == 2000) {
                ElMessage({
                  type: 'success',
                  message: result.data.message,
                })
                data.dialogFormVisible=false;
                list();
              } else {
                ElMessage.error(result.data.message)
              }
            })
          }else{
            axios({
              url: '/api/students',
              method: 'post',
              data: data.form
            }).then(function (result) {
              if (result.data.code == 2000) {
                ElMessage({
                  type: 'success',
                  message: '添加成功',
                })
                data.dialogFormVisible=false;
                list();
              } else {
                ElMessage.error(result.data.message)
              }
            })
          }
        } else {
          console.log("数据校验失败")
          ElMessage.error("请按提示填写表单")
        }
      })
    }

    const resetForm = () => {
      ElMessageBox.confirm(
          '确定重置该学生信息吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            ruleFormRef.value.resetFields();
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消重置',
            })
          })
    }

    //删除
    const onDel = (id) => {
      ElMessageBox.confirm(
          '确定删除该学生信息吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios({
              url:'/api/students/'+id,
              method:'delete'
            }).then(function (result){
              if(result.data.code==2000){
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
                list();
              }
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            })
          })
    }

    //翻页
    const handleCurrentChange = (pageNum) => {
      data.pageNum=pageNum;
      list();
    }

    //一加载就显示
    onMounted(function (){
      list()
    })

    return{
      ...toRefs(data),
      list,
      onSelect,
      handleCurrentChange,
      onDel,
      onEdit,
      onAdd,
      doAdd,
      ruleFormRef,
      resetForm
    }
  }
}
</script>

<style scoped lang="scss">

</style>